<template>
  <div class="system-settings">
    <h2>系统设置</h2>
    <p>配置平台参数，如通知、权限、外观等。</p>
    <form class="settings-form" @submit.prevent>
      <fieldset>
        <legend>通知设置</legend>
        <label><input type="checkbox" v-model="notifyEmail" :disabled="role !== 'admin'" /> 邮件通知</label>
        <label><input type="checkbox" v-model="notifySms" :disabled="role !== 'admin'" /> 短信通知</label>
      </fieldset>
      <fieldset>
        <legend>权限设置</legend>
        <label>当前角色：<span>{{ roleLabel }}</span></label>
      </fieldset>
      <fieldset>
        <legend>外观设置</legend>
        <label>主题色：
          <input type="color" v-model="themeColor" style="vertical-align:middle; margin-left:8px; width:32px; height:32px; border:none; background:none;" :disabled="role === 'user'" />
        </label>
        <span style="margin-left:8px; color:var(--theme-color); font-weight:bold;">{{ themeColor }}</span>
      </fieldset>
      <button type="submit" :disabled="role === 'user'">保存设置</button>
    </form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, inject, computed } from 'vue'
const THEME_KEY = 'global-theme-color'
const themeColor = ref(localStorage.getItem(THEME_KEY) || '#e0e0e0')
const notifyEmail = ref(true)
const notifySms = ref(false)
// 通过 inject 获取当前登录角色
const injectedRole = inject('userRole', ref('manager'))
const role = injectedRole
const roleLabel = computed(() => role.value === 'admin' ? '管理员' : role.value === 'manager' ? '管理层' : '普通用户')

watch(themeColor, (val) => {
  document.documentElement.style.setProperty('--theme-color', val)
  localStorage.setItem(THEME_KEY, val)
}, { immediate: true })

onMounted(() => {
  document.documentElement.style.setProperty('--theme-color', themeColor.value)
})
</script>

<style scoped>
.system-settings { padding: 2rem; }
.settings-form { margin-top: 1rem; }
.settings-form fieldset { border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 1.5rem; padding: 1rem; }
.settings-form legend { font-weight: bold; color: #f4fefa; }
.settings-form label { display: block; margin-bottom: 1rem; }
.settings-form select { margin-left: 8px; padding: 0.2rem 0.5rem; border-radius: 4px; border: 1px solid #ccc; }
button { background: var(--theme-color, #ecf5f1); color: #fff; border: none; border-radius: 4px; padding: 0.5rem 1.2rem; cursor: pointer; }
button:disabled { background: #ccc; cursor: not-allowed; }
button:hover:enabled { background: var(--theme-color, #4584c6); filter: brightness(0.9); }
</style>
